<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>退租</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_259759_0v92g5urpory66r.css">
    <link rel="stylesheet" type="text/css" href="../style/style.css">
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/laydate/laydate.js"></script>
</head>
<body>
<div class="header clearfix">
    <a href="" class="logo"></a>
    <div class="option">
        <div class="show">经营报表<i class="iconfont icon-jiantou2"></i></div>
    </div>
</div>
<div class="filter-row clearfix">
    <div class="select">
        <div class="show">全部项目<i class="iconfont icon-jiantou2"></i></div>
    </div>
    <div class="btns clearfix">
        <a href="">合同</a>
        <a href="">租金</a>
        <a href="" class="cur">退租</a>
        <a href="">其他</a>
    </div>
</div>
<div class="row">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">所有门店总统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input1">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="map-box" id="zongtuizu"></div>
            <div class="map-box" id="tuizuyuanyin"></div>
            <div class="map-box" id="manyidu"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">北工大汇总统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input2">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="map-box" id="zongtuizu2"></div>
            <div class="map-box" id="tuizuyuanyin2"></div>
            <div class="map-box" id="manyidu2"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">百合湾汇总统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input3">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="map-box" id="zongtuizu3"></div>
            <div class="map-box" id="tuizuyuanyin3"></div>
            <div class="map-box" id="manyidu3"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">四惠东汇总统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input4">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="map-box" id="zongtuizu4"></div>
            <div class="map-box" id="tuizuyuanyin4"></div>
            <div class="map-box" id="manyidu4"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="section">
        <div class="section-head clearfix">
            <div class="txt">清水湾汇总统计</div>
            <div class="date clearfix">
                <label>日期</label>
                <div class="input" id="input5">
                    2017-10-01 至 2018-01-12
                </div>
            </div>
        </div>
        <div class="map-row clearfix">
            <div class="map-box" id="zongtuizu5"></div>
            <div class="map-box" id="tuizuyuanyin5"></div>
            <div class="map-box" id="manyidu5"></div>
        </div>
    </div>
</div>
</body>
<script>
    laydate.render({
        elem: '#input1',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    laydate.render({
        elem: '#input2',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    laydate.render({
        elem: '#input3',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    laydate.render({
        elem: '#input4',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    laydate.render({
        elem: '#input5',
        range: '至',
        format: 'yyyy-MM-dd',
        theme: '#1CCE6C'
    });
    /****所有****/
    var zongtuizuOption = {
        title: {
            text: '总退租',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '20',
            top: '20'
        },
        xAxis: {
            type: 'category',
            data: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [{
            data: [5, 10, 11, 18, 16, 28, 35],
            type: 'line',
            color: '#1DCE6C'
        }]
    };
    var zongtuizuChart = echarts.init(document.getElementById('zongtuizu'));
    zongtuizuChart.setOption(zongtuizuOption);

    var tuizuyuanyinOption = {
        title: {
            text: '退租原因分析',
            textStyle: {
                color: '#5BD6CE',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'退租原因',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'换工作'},
                    {value:310, name:'离开北京'},
                    {value:274, name:'其他'},
                    {value:235, name:'房价高'},
                    {value:400, name:'服务质量差'},
                    {value:450, name:'地点远'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#24B2B7',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var tuizuyuanyinChart = echarts.init(document.getElementById('tuizuyuanyin'));
    tuizuyuanyinChart.setOption(tuizuyuanyinOption);

    var manyiduOption = {
        title: {
            text: '满意度',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'满意度',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'1星'},
                    {value:310, name:'2星'},
                    {value:274, name:'3星'},
                    {value:235, name:'4星'},
                    {value:400, name:'5星'},
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1FCF6C',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var manyiduChart = echarts.init(document.getElementById('manyidu'));
    manyiduChart.setOption(manyiduOption);
    /****北工大****/
    var zongtuizuOption2 = {
        title: {
            text: '总退租',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '20',
            top: '20'
        },
        xAxis: {
            type: 'category',
            data: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [{
            data: [5, 10, 11, 18, 16, 28, 35],
            type: 'line',
            color: '#1DCE6C'
        }]
    };
    var zongtuizuChart2 = echarts.init(document.getElementById('zongtuizu2'));
    zongtuizuChart2.setOption(zongtuizuOption2);

    var tuizuyuanyinOption2 = {
        title: {
            text: '退租原因分析',
            textStyle: {
                color: '#5BD6CE',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'退租原因',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'换工作'},
                    {value:310, name:'离开北京'},
                    {value:274, name:'其他'},
                    {value:235, name:'房价高'},
                    {value:400, name:'服务质量差'},
                    {value:450, name:'地点远'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#24B2B7',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var tuizuyuanyinChart2 = echarts.init(document.getElementById('tuizuyuanyin2'));
    tuizuyuanyinChart2.setOption(tuizuyuanyinOption2);

    var manyiduOption2 = {
        title: {
            text: '满意度',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'满意度',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'1星'},
                    {value:310, name:'2星'},
                    {value:274, name:'3星'},
                    {value:235, name:'4星'},
                    {value:400, name:'5星'},
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1FCF6C',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var manyiduChart2 = echarts.init(document.getElementById('manyidu2'));
    manyiduChart2.setOption(manyiduOption2);
    /****百合湾****/
    var zongtuizuOption3 = {
        title: {
            text: '总退租',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '20',
            top: '20'
        },
        xAxis: {
            type: 'category',
            data: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [{
            data: [5, 10, 11, 18, 16, 28, 35],
            type: 'line',
            color: '#1DCE6C'
        }]
    };
    var zongtuizuChart3 = echarts.init(document.getElementById('zongtuizu3'));
    zongtuizuChart3.setOption(zongtuizuOption3);

    var tuizuyuanyinOption3 = {
        title: {
            text: '退租原因分析',
            textStyle: {
                color: '#5BD6CE',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'退租原因',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'换工作'},
                    {value:310, name:'离开北京'},
                    {value:274, name:'其他'},
                    {value:235, name:'房价高'},
                    {value:400, name:'服务质量差'},
                    {value:450, name:'地点远'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#24B2B7',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var tuizuyuanyinChart3 = echarts.init(document.getElementById('tuizuyuanyin3'));
    tuizuyuanyinChart3.setOption(tuizuyuanyinOption3);

    var manyiduOption3 = {
        title: {
            text: '满意度',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'满意度',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'1星'},
                    {value:310, name:'2星'},
                    {value:274, name:'3星'},
                    {value:235, name:'4星'},
                    {value:400, name:'5星'},
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1FCF6C',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var manyiduChart3 = echarts.init(document.getElementById('manyidu3'));
    manyiduChart3.setOption(manyiduOption3);
    /****四惠东****/
    var zongtuizuOption4 = {
        title: {
            text: '总退租',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '20',
            top: '20'
        },
        xAxis: {
            type: 'category',
            data: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [{
            data: [5, 10, 11, 18, 16, 28, 35],
            type: 'line',
            color: '#1DCE6C'
        }]
    };
    var zongtuizuChart4 = echarts.init(document.getElementById('zongtuizu4'));
    zongtuizuChart4.setOption(zongtuizuOption4);

    var tuizuyuanyinOption4 = {
        title: {
            text: '退租原因分析',
            textStyle: {
                color: '#5BD6CE',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'退租原因',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'换工作'},
                    {value:310, name:'离开北京'},
                    {value:274, name:'其他'},
                    {value:235, name:'房价高'},
                    {value:400, name:'服务质量差'},
                    {value:450, name:'地点远'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#24B2B7',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var tuizuyuanyinChart4 = echarts.init(document.getElementById('tuizuyuanyin4'));
    tuizuyuanyinChart4.setOption(tuizuyuanyinOption4);

    var manyiduOption4 = {
        title: {
            text: '满意度',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'满意度',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'1星'},
                    {value:310, name:'2星'},
                    {value:274, name:'3星'},
                    {value:235, name:'4星'},
                    {value:400, name:'5星'},
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1FCF6C',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var manyiduChart4 = echarts.init(document.getElementById('manyidu4'));
    manyiduChart4.setOption(manyiduOption4);
    /****清水湾****/
    var zongtuizuOption5 = {
        title: {
            text: '总退租',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '20',
            top: '20'
        },
        xAxis: {
            type: 'category',
            data: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#4C5164'
                }
            },
            axisLabel: {
                color: '#FFF'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: ['#363C51']
                }
            }
        },
        series: [{
            data: [5, 10, 11, 18, 16, 28, 35],
            type: 'line',
            color: '#1DCE6C'
        }]
    };
    var zongtuizuChart5 = echarts.init(document.getElementById('zongtuizu5'));
    zongtuizuChart5.setOption(zongtuizuOption5);

    var tuizuyuanyinOption5 = {
        title: {
            text: '退租原因分析',
            textStyle: {
                color: '#5BD6CE',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'退租原因',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'换工作'},
                    {value:310, name:'离开北京'},
                    {value:274, name:'其他'},
                    {value:235, name:'房价高'},
                    {value:400, name:'服务质量差'},
                    {value:450, name:'地点远'}
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#24B2B7',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var tuizuyuanyinChart5 = echarts.init(document.getElementById('tuizuyuanyin5'));
    tuizuyuanyinChart5.setOption(tuizuyuanyinOption5);

    var manyiduOption5 = {
        title: {
            text: '满意度',
            textStyle: {
                color: '#1DCE6C',
                fontSize: '14px'
            },
            left: '40',
            top: '20'
        },

        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series : [
            {
                name:'满意度',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[
                    {value:335, name:'1星'},
                    {value:310, name:'2星'},
                    {value:274, name:'3星'},
                    {value:235, name:'4星'},
                    {value:400, name:'5星'},
                ].sort(function (a, b) { return a.value - b.value; }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#FFF'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#1FCF6C',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    }
    var manyiduChart5 = echarts.init(document.getElementById('manyidu5'));
    manyiduChart5.setOption(manyiduOption5);
</script>
</html>